{%- liquid
  assign custom_logo_width = section.settings.custom_logo_width | append: 'px'

  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
    when 'black'
      assign background_color = 'bg-black'
  endcase

  case section.settings.text_color
    when 'white'
      assign text_color = 'text-inverse'
    else
      assign text_color = ''
  endcase 

  if section.settings.show_full_width_header
    assign header_pc_layout = 'header-full-width'
    assign cart_notification_layout = 'full-width'
  else
    assign header_pc_layout = 'header-middle-left'
  endif

  assign offcanvas_pos = 'offcanvas-start'
  case section.settings.mobile_layout
    when 'logo_center'
      assign header_mob_layout = 'header-logo-center'
    when 'tab_first'
      assign header_mob_layout = 'header-tab-first'
    when 'logo_first'
      assign header_mob_layout = 'header-logo-first'
      assign offcanvas_pos = 'offcanvas-end'
      assign drawer_pos = 'drawer-end'
  endcase

  assign hover_style = 'hover-text-outline'

  if section.settings.enable_sticky_header
    assign sticky_number = 1
  else
    assign sticky_number = 0
  endif

  assign flag = false
  if section.settings.show_full_width_header == true
    assign logo_margin = 'm-lg-0'
  endif

  if section.settings.show_separator_line == true
    assign show_underline = 'header-underline'
  endif
-%}

{%- if settings.show_cart -%}
  {%- liquid
    assign show_mini_cart = false
    assign show_drawer_cart = false
    case settings.cart_type
      when 'drawer'
        assign show_mini_cart = false 
        if request.page_type != 'cart'
          assign show_drawer_cart = true
        endif
      when 'mini_cart'
        assign show_drawer_cart = false
        if request.page_type != 'cart'
          assign show_mini_cart = true
        endif
      when 'page'
        assign show_drawer_cart = false
        assign show_mini_cart = false
    endcase
    if show_mini_cart or show_drawer_cart
      assign cart_dropdown_style = 'as-cart-dropdown as-dropdown'
    endif
  -%}
{% endif %}

<div class="dropdown-backdrop fade as-dropdown-backdrop"></div>
<div class="as-site-header header-v4 navbar enable-transparency {{ header_pc_layout }} {{ header_mob_layout }} {{ background_color }} {{ text_color }} {{ show_underline }}" 
  data-expand="true">
  <input type="hidden" value="{{ sticky_number }}" class="as-header-sticky-flag">
  <input type="hidden" value="1" class="as-header-immersion-flag">
  <div class="container d-block header-wrap">
    <div class="header">
      <div class="d-block d-lg-none header-drawer">
        <button class="as-expand as-navbar-toggler navbar-toggler order-last border-0 px-0 collapsed" type="button" data-bs-toggle="collapse" aria-label="Navbar toggler">
          <div class="hamburger-box-wrapper">
            <span class="hamburger-box"></span>
            <span class="hamburger-box"></span>
            <span class="hamburger-box"></span>
          </div>
        </button>
      </div>

      {%- if request.page_type == 'index' -%}
        <h1 class="header-heading m-0">
      {%- endif -%}
        <a class="header-heading-link d-inline-block text-decoration-none {{ logo_margin }}" href="{{ routes.root_url }}">
          {%- if section.settings.logo != blank -%}
            {%- assign image_size = section.settings.custom_logo_width | append: 'x' -%}
            {%- liquid 
              assign response_height = section.settings.custom_logo_width | times: section.settings.logo.height | divided_by: section.settings.logo.width
            -%}
            <img width="{{ section.settings.logo.width }}" height="{{ section.settings.logo.height }}" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
              src="{{ section.settings.logo | img_url: image_size }}"
              loading="lazy"
              alt="{{ section.settings.logo.alt | default: shop.name | escape }}"
              {% if response_height <= 40 %}style="width: {{ custom_logo_width }}; height: auto;"{% endif %}
              {% if response_height > 40 %}style="height: 40px; width: auto;"{% endif %}
            >
          {%- else -%}
            <span class="h6 mb-0">{{ shop.name }}</span>
          {%- endif -%}
        </a>
      {%- if request.page_type == 'index' -%}
        </h1>
      {%- endif -%}
      
      {%- if section.settings.main_menu != blank -%}
      <nav class="header-inline-menu d-none d-lg-block ">
        <ul class="nav">
          {%- for link in section.settings.main_menu.links -%}
            <li class="nav-item {% if link.levels >= 1 %}as-dropdown{% endif %}">
              {%- if link.levels == 0 -%}
                <a {% render 'link', link: link.url %} class="nav-link {{ hover_style }}" href="{{ link.url }}">
                  <span>{{ link.title }}</span>
                </a>
              {% elsif link.levels >= 1 %}
                {% comment %}判断配置的图片链接是否有跟三级菜单链接相同的{% endcomment %}
                {% liquid 
                  assign thirdmenu_links = link.links | map: "links" | map: "url"
                  assign block_links = section.blocks | where: "type", "mega_menu" | map: "settings" | map: 'link'
                  assign is_mega_menu = false 
                  for thirdmenu_link in thirdmenu_links
                    for block_link in block_links
                      if thirdmenu_link == block_link
                        assign is_mega_menu = true
                        break
                      endif
                    endfor
                  endfor
                %}
                {%- if is_mega_menu -%}
                  <details-disclosure>
                    <div class="with-mega-menu-dropdown as-details-toggle">
                      <a id="dropdownMenuLink{{ forloop.index }}"
                        class="nav-link {{ hover_style }} small nav-fw">
                        <span class="text-outline">{{ link.title }}</span>
                        <span class="dropdown-icon">{% render 'icon-chevron-down' %}</span>             
                      </a>

                      {% comment %}
                        PC端扁平化二级、三级菜单
                        
                        此菜单在导航非吸顶时有局限性，当配置超过一屏内容并在展开情况下，向下滑动鼠标，菜单无法收起。
                        因此当配置超过一屏内容时，请配置导航为正常文本流状态。
                      {% endcomment %}
                      {% render 'header-dropdown-menu-v2', is_flag: is_mega_menu, link: link, background_color: background_color, if_first: forloop.first, is_desktop_logo_top_left: is_desktop_logo_top_left  %}
                    </div>
                  </details-disclosure>
                {%- else -%}
                  <details-disclosure>
                    {% render 'menu-tertiary',
                      link: link,
                      hover_style: hover_style,
                      background_color: background_color
                    %}
                  </details-disclosure>
                {%- endif -%}
              {%- endif -%}
            </li>
          {%- endfor -%}
        </ul>
      </nav>
      {%- endif -%}

      <div class="header-icons d-flex">
        {%- if settings.show_cart -%}
          <div class="nav-item me-2 me-md-3 {{ cart_dropdown_style }}">
            <details-disclosure>
            <div class="with-mini-cart-dropdown as-details-toggle">
              <cart-icon-bubble class="d-block cart-icon-bubble-wrapper">
                <a {% if show_drawer_cart == false %}href="{{ routes.cart_url }}"{% endif %} 
                  {% if show_drawer_cart %} data-bs-toggle="offcanvas" data-bs-target="#drawer-cart-items" aria-controls="offcanvasRight" {% endif %}
                  class="header-icon " 
                  id="as-cart-icon-bubble-web" 
                  data-id="cart-icon-bubble">
                  {% render 'cart-icon-bubble' %}
                </a>
              </cart-icon-bubble>
              {% if show_mini_cart %}
                <mini-cart 
                  id="mini-cart-items" 
                  class="as-details-content mini-cart-container dropdown-menu position-absolute end-0 overflow-hidden {{ background_color }} border-0 py-0 lh-base text-wrap"
                  data-id="mini-cart">
                  {% render 'mini-cart',
                    settings_text_color: section.settings.text_color
                  %}
                </mini-cart>
              {% endif %}
            </div>
            </details-disclosure>
          </div>
        {%- endif -%}

        {% if shop.customer_accounts_enabled %}
          <div class="nav-item {% if customer %}as-dropdown{% endif %}">
            <details-disclosure>
            <div class="with-default-dropdown as-details-toggle">
              <a class="header-icon flex-row text-decoration-none" href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}">
                <span class="icon-wrap-md">{% render 'icon-user' %}</span>
                {% if customer.name %}
                  <span class="d-none d-lg-block">{{ customer.name | truncate: 12 }}</span>
                {% endif %}
              </a>
              {%- if customer -%}
              <ul class="list-unstyled default-dropdown {{ background_color }} {{ text_color }} user-dropdown as-details-content">
                <li>
                  <a class="menu-item" href="{{ routes.account_url }}">{{ 'customer.account.my_orders' | t }}</a>
                </li>
                <li>
                  <a class="menu-item" href="{{ routes.account_addresses_url }}">{{ 'customer.account.my_addresses' | t }}</a>
                  <hr class="my-2">
                </li>
                <li>
                  <a class="menu-item as-last" href="{{ routes.account_logout_url }}">{{ 'customer.customer.log_out' | t }}</a>
                 </li>
              </ul>
              {%- endif -%}
            </div>
            </details-disclosure>
          </div>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="d-block d-lg-none">
    {% render 'mega-menu-accordion',
      background_color: background_color,
      section: section
    %}
  </div>
</div>

{%- if settings.show_cart -%}
  {%- if settings.add_to_cart_action == 'show_added_msg' and show_mini_cart -%}
    <div class="cart-notification-container container">
      {% render 'cart-notification', class: 'd-none d-md-block' %}
    </div>
  {%- endif -%}
{%- endif -%}

{% schema %}
  {
    "name": "Header",
    "tag": "header",
    "class": "shopify-section-header immersion-header as-shopify-header",
    "settings": [
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "white"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "white",
             "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }  
        ],
        "default": "black"
      },
      {
        "label": "Logo image",
        "type": "image_picker",
        "id": "logo"
      },
      {
        "type": "range",
        "id": "custom_logo_width",
        "min": 50,
        "max": 250,
        "step": 10,
        "default": 70,
        "unit": "px",
        "label": "Custom logo width"
      },
      {
        "type": "link_list",
        "label": "Main menu",
        "id": "main_menu",
        "default": "main-menu"
      },
      {
        "type": "checkbox",
        "id": "show_full_width_header",
        "label": "Show full width header on Desktop",
        "default": false,
        "info": "Logo is fixed on the left side."
      },
      {
        "type": "select",
        "id": "mobile_layout",
        "label": "Mobile layout",
        "options": [
          {
            "value": "logo_center",
            "label": "Logo on center"
          },
          {
            "value": "tab_first",
            "label": "Tab first"
          },
          {
            "value": "logo_first",
            "label": "Logo first"
          }  
        ],
        "default": "logo_center"
      },
      {
        "type": "checkbox",
        "id": "show_separator_line",
        "label": "Show separator line",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "enable_sticky_header",
        "label": "Enable sticky header",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "adapt_to_image_size",
        "label": "Adapt to Image Size",
        "default": false,
        "info": "It works on images in mega menu"
      }
    ],
    "blocks": [
      {
        "type": "mega_menu",
        "name": "Mega menu",
        "settings": [
          {
            "type": "paragraph",
            "content": "Add an image for the specified navigation"
          },
          {
            "type": "image_picker",
            "id": "img",
            "label": "Image"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link",
            "info": "Fill in the URL which need add an image.Please make sure that the link you already exists in the selected navigation, otherwise this block will not be shown."
          },
          {
            "type": "text",
            "id": "optional_title",
            "label": "Optional title"
          }  
        ]
      }
    ]
  }
{% endschema %}